<template>
    <div>
        <!--不能在子组件中加入 el-menu 标签 ，因为在递归的时候也会递归生成多个menu，虽然不会影响效果，但是没有了菜单的层级效果-->
        <!--不能在根节点做循环 可以使用div 或者label 遍历时也可以:key="menu.id -->
        <label v-for="(menu,index) in menus" :key="index" style="width: 200px">
            <el-submenu :index="menu.url" v-if="menu.children.length>0">
                <template slot="title"><i :class="menu.icon"></i> {{menu.name}}</template>
                <menu-tree :menus="menu.children"></menu-tree>
            </el-submenu>
            <el-menu-item v-else :index="menu.url">
                <i :class="menu.icon"></i> {{menu.name}}
            </el-menu-item>
        </label>
    </div>

    <!-- el-menu，ElementUI将Vue中route的 to 属性，使用index来代替 -->
<!--    <div>-->
<!--        <el-menu-item index="/userinfo">-->
<!--            <i class="el-icon-setting"></i>用户管理-->
<!--        </el-menu-item>-->
<!--        <el-submenu index="3">-->
<!--            <template slot="title"><i class="el-icon-message"></i>系统管理</template>-->
<!--            <el-menu-item index="/company">公司管理</el-menu-item>-->
<!--        </el-submenu>-->
<!--    </div>-->
</template>

<script>
    //import MenuTree from "./MenuTree";
    export default {
        name: "MenuTree",
        // components:{
        //     MenuTree
        // },
        props:{
            menus:Array
        }
    }
</script>

<style scoped>
label{
    margin: 0;
}
</style>